<template>
    <div class="dataMap"
         :style="{'padding-right': shrinkage ? '400px' : '0px', height: minHeight + 'px'}">
        <div class="dataMap-amap">
            <MapLoading ref="MapLoading"/>
            <viewUserMap ref="map" @hideMapLoading="hideMapLoading" :showInfo="showInfo" :markers="data"/>
            <span class="dataMap-amap-all">
                <a-button icon="shrink" @click="shrinkAll">
                    显示全部
                </a-button>
            </span>
        </div>
        <div class="dataMap-slideRight" :style="{right: shrinkage ? '0' : '-400px'}">
            <div class="dataMap-slideRight-shrinkage" @click="shrinkage = !shrinkage">
                <k-icon type="iconleft" :class="shrinkage ? 'shrinkage-icon' : 'shrinkage-icon shrinkage-icon-right'"></k-icon>
            </div>
            <transition
                    enter-active-class="animated fadeIn"
                    leave-active-class="animated fadeOut"
            >
                <div class="dataMap-slideRight-userInfo"
                     @mouseenter="infoMouseenter"
                     @mouseleave="infoMouseleave"
                     v-if="showItemIndex !== null">
                    <div class="dataMap-slideRight-userInfo-title">
                        详细信息
                        <a-icon type="close" @click="closeUserInfo" />
                    </div>
                    <a-spin :spinning="infoLoading">
                        <a-icon slot="indicator" type="loading" style="font-size: 24px" spin />
                        <div class="dataMap-slideRight-userInfo-item"
                             v-for="(item, key) in showItemList"
                             :key="key"
                        >
                            <span>{{item.label}}：</span>
                            <span v-if="Array.isArray(item.prop)"
                                  :style="item.style ? item.style(data[showItemIndex][item.prop]) : {}">{{
                            item.prop.map(v => data[showItemIndex][v]).join('/')
                        }}{{item.unit||''}}</span>
                            <span :style="item.style ? item.style(data[showItemIndex][item.prop]) : {}"
                                  v-else>{{data[showItemIndex][item.prop]}}{{item.unit||''}}</span>
                        </div>
                        <div class="dataMap-slideRight-userInfo-btn">
                            <a-tooltip placement="top">
                                <template slot="title">
                                    <span>活动轨迹</span>
                                </template>
                                <img @click="viewData(2)" src="@/assets/img/trajectory.png" alt="">
                            </a-tooltip>
                            <a-tooltip placement="top">
                                <template slot="title">
                                    <span>体征数据</span>
                                </template>
                                <img @click="viewData(1)" src="@/assets/img/info.png" alt="">
                            </a-tooltip>
                        </div>
                    </a-spin>
                </div>
            </transition>
            <div class="dataMap-slideRight-title">
                用户信息
                <a-popover placement="bottom">
                    <template slot="content">
                        <p class="dataMap-slideRight-title-more-btn" @click="showAddUserModel">添加用户</p>
                        <p class="dataMap-slideRight-title-more-btn" @click="goImportUser">批量导入</p>
                    </template>
                    <a-icon type="more" class="dataMap-slideRight-title-more"/>
                </a-popover>
            </div>
            <div class="dataMap-slideRight-form">
                <a-tree-select
                        style="width: 154px"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        :tree-data="treeData"
                        placeholder="机构"
                        allowClear
                        tree-default-expand-all
                >
                </a-tree-select>
                <a-input-search style="width:212px;" allowClear placeholder="姓名/IMEM号">
                    <a-button slot="enterButton">
                        搜索
                    </a-button>
                </a-input-search>
            </div>
            <div class="dataMap-slideRight-table">
                <a-table :columns="columns"
                         style="border:none;"
                         :scroll="{y: minHeight - 200 }"
                         size="small"
                         :pagination="false"
                         :loading="loading"
                         :customRow="customRow"
                         :rowKey="tableDatas => tableDatas.id"
                         :data-source="data">
                    <template slot="call" slot-scope="text">
                        <span :style="{color: text > 0 ? 'red' : ''}">{{text}}次</span>
                    </template>
                </a-table>
            </div>
            <div class="dataMap-slideRight-padding">
                <a-pagination v-model="current"
                              size="small"
                              :total="300"
                              :defaultPageSize="20"
                              @change="paginationChange"
                              show-less-items />
            </div>
        </div>
        <addUserModel ref="addUserModel"/>
    </div>
</template>

<script>
    import kIcon from '@/utils/k-icon';
    import {monitorList} from '@/services/monitoring';
    import addUserModel from "./addUserModel";
    import viewUserMap from "../../components/viewUserMap";
    import MapLoading from '@/components/mapLoading';
    import {setScroll} from "@/utils/mixin";

    const minHeight = window.innerHeight - 64 - 25;

    const treeData = [
        {
            title: '北京世纪启明风险管理有限公司',
            value: '0-0',
            key: '0-0',
            children: [
                {
                    title: '世纪启明武汉分公司公司',
                    value: '0-0-1',
                    key: '0-0-1',
                },
                {
                    title: '世纪启明杭州分公司公司',
                    value: '0-0-2',
                    key: '0-0-2',
                },
                {
                    title: '世纪启明上海分公司公司',
                    value: '0-0-3',
                    key: '0-0-3',
                },
            ],
        },
        {
            title: '北京金高桥软件有限公司',
            value: '1-1',
            key: '1-1',
            children: [
                {
                    title: '北京金高桥软件武汉分公司',
                    value: '1-1-1',
                    key: '1-1-1',
                },
                {
                    title: '北京金高桥软件杭州分公司',
                    value: '1-1-2',
                    key: '1-1-2',
                },
                {
                    title: '北京金高桥软件上海分公司',
                    value: '1-1-3',
                    key: '1-1-3',
                },
            ],
        },
        {
            title: '魔嗖科技有限公司',
            value: '2-2',
            key: '2-2',
            children: [
                {
                    title: '魔嗖科技武汉分公司',
                    value: '2-2-1',
                    key: '2-2-1',
                },
                {
                    title: '魔嗖科技杭州分公司',
                    value: '2-2-2',
                    key: '2-2-2',
                },
                {
                    title: '魔嗖科技上海分公司',
                    value: '2-2-3',
                    key: '2-2-3',
                },
            ],
        },
        {
            title: '红中科技有限公司',
            value: '3-3',
            key: '3-3',
            children: [
                {
                    title: '红中科技武汉分公司',
                    value: '3-3-1',
                    key: '3-3-1',
                },
                {
                    title: '红中科技杭州分公司',
                    value: '3-3-2',
                    key: '3-3-2',
                },
                {
                    title: '红中科技上海分公司',
                    value: '3-3-3',
                    key: '3-3-3',
                },
            ],
        },
    ];
    export default {
        name: "index",
        mixins: [setScroll],
        components: {
            kIcon,
            addUserModel,
            viewUserMap,
            MapLoading
        },
        data() {
            const columns = [
                {
                    dataIndex: 'name',
                    key: 'name',
                    title: '姓名',
                },
                {
                    dataIndex: 'pressureBefore',
                    key: 'pressureBefore',
                    width: 100,
                    title: '血压(mmHg)',
                    customRender: (text, row) => {
                        return `${row.pressureBefore}/${row.pressureAfter}`;
                    },
                },
                {
                    dataIndex: 'bpm',
                    key: 'bpm',
                    title: '心率(bpm)',
                },
                {
                    dataIndex: 'call',
                    key: 'id',
                    title: '今日报警',
                    scopedSlots: { customRender: 'call' },
                },
            ];
            return {
                resetScroll: ['.dataMap .ant-table-body'],
                minHeight,
                columns,
                loading: false,
                data: [],
                current: 1,
                shrinkage: true,
                treeData,
                selectedRowKey: null,
                showItemIndex: null,
                time: null,
                showItemList: [
                    {label: '真实姓名', prop: 'name'},
                    {label: '设备IMEI', prop: 'imei'},
                    {label: '所属机构', prop: 'affiliation'},
                    {label: '今日报警', prop: 'call', unit: '次', style: (value) => {
                            return {
                                color: value > 0 ? '#e33c64' : '#505050'
                            }
                        }},
                    {label: '当前心率', prop: 'bpm', unit: 'bpm'},
                    {label: '当前血压', prop: ['pressureBefore', 'pressureAfter'], unit: 'mmHg'},
                    {label: '当前步数', prop: 'step', unit: '步'},
                    {label: '当前位置', prop: 'site'},
                    {label: '上报时间', prop: 'dateTime'},
                ],
                infoLoading: false,
                infoLoadingTime: null,
            }
        },
        created() {
            this.getData();
        },
        methods: {
            // 关闭maploading
            hideMapLoading() {
                this.$refs['MapLoading'].hideMapLoading();
            },
            customRow(record, index) {
                let style = {
                    'background-color': index === this.selectedRowKey ? '#f5f5f5' : '',
                    cursor: 'pointer'
                }
                return {
                    style,
                    on: {
                        mouseenter: () => {
                            this.showInfo(index);
                        },
                        mouseleave: this.infoMouseleave,
                        click: () => {
                            if (this.selectedRowKey  === index) {
                                this.shrinkAll();
                            } else {
                                this.$refs['map'].setCenter([record.longitudeLng,record.longitudeLat]);
                            }
                           this.selectedRowKey = this.selectedRowKey  === index ? null : index;
                        },
                    },
                }
            },
            //infoMouseenter
            infoMouseenter() {
                clearTimeout(this.time);
            },
            showInfo(index) {
                if(this.showItemIndex !== index) {
                    this.infoLoading = true;
                    this.showItemIndex = index;
                } else {
                    return;
                }
                clearTimeout(this.time);
                clearTimeout(this.infoLoadingTime);
                this.infoLoadingTime = setTimeout(() => {
                    this.infoLoading = false;
                }, 300)
            },
            infoMouseleave() {
                this.time = setTimeout(() => {
                    this.showItemIndex = null;
                }, 1000)
            },
            viewData(index) {
                this.$router.push({
                    path: `/UserManagement/dataMonitoring/data/1`,
                    query: {
                        tab: index
                    }
                })
            },
            // 关闭用户信息
            closeUserInfo() {
                clearTimeout(this.time);
                this.showItemIndex = null;
            },
            // 显示全部
            shrinkAll() {
                this.selectedRowKey = null;
                this.$refs['map'].shrinkAll();
            },
            // 添加用户弹框
            showAddUserModel() {
                this.$refs['addUserModel'].show();
            },
            // 导入用户
            goImportUser() {
                this.$router.push(`/UserManagement/dataMonitoring/importUser`)
            },
            paginationChange(page, pageSize) {
                console.log('当前页=' + page);
                console.log('每页条数=' + pageSize);
                this.getData();
            },
            getData() {
                this.selectedRowKey = null;
                this.showItemIndex = null;
                this.loading = true;
                monitorList().then(data => {
                    this.loading = false;
                    this.data = data.data;
                    document.querySelector('.dataMap-slideRight-table .ant-table-body').scrollTop = 0
                })
            }
        }
    }
</script>

<style lang="less">
    .ant-table-small{
        border: none!important;
    }

    .dataMap {
        position: relative;
        overflow: hidden;
        .ant-table-thead > tr > th{
            font-weight: normal;
        }
        &-amap {
            height: 100%;
            position: relative;
            &-all{
                position: absolute;
                bottom: 15px;
                right: 15px;
                z-index: 8;
            }
        }
        &-slideRight {
            width: 400px;
            position: absolute;
            right: 0;
            bottom: 0;
            top: 0;
            background: #fff;
            display: flex;
            flex-direction: column;
            transition: all ease-in-out .3s;
            &-shrinkage {
                position: absolute;
                bottom: 0;
                top: 0;
                left: -27px;
                margin: auto;
                width: 27px;
                height: 63px;
                color: rgba(80, 80, 80, 1);
                background-color: rgba(255, 255, 255, 1);
                border-radius: 13px  0  0 13px;
                box-shadow: -1px 0px 2px 0px rgba(0, 0, 0, 0.5);
                text-align: center;
                cursor: pointer;
                font-size: 22px;
                display: flex;
                align-items: center;
                z-index: 10;
                justify-content: center;
            }
            &-userInfo{
                position: absolute;
                width: 280px;
                left: -280px;
                z-index: 11;
                top: 20%;
                background-color: rgba(255, 255, 255, 1);
                box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.5);
                &-item{
                    display: flex;
                    padding: 10px 15px 0 15px;
                    align-items: flex-start;
                    justify-content: flex-start;
                    span{
                        &:first-child{
                            display: inline-block;
                            width: 70px;
                            color: rgba(153, 153, 153, 1);
                            font-size: 14px;
                            text-align: left;
                        }
                        &:last-child{
                            flex: 1;
                            color: rgba(80, 80, 80, 1);
                            font-size: 14px;
                            text-align: left;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                        }
                    }
                }
                &-btn{
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    padding: 15px;
                    box-sizing: border-box;
                    img{
                        width: 21px;
                        height: 21px;
                        cursor: pointer;
                        &:first-child{
                            width: 25px;
                            height: 25px;
                            margin-right: 15px;
                        }
                    }
                }
                &-title{
                    height: 38px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 15px;
                    border-bottom: 1px solid #e5e5e5;
                    i{
                        cursor: pointer;
                        transition: all .3s linear;
                        color: #999999;
                        &:hover{
                            color: rgba(100, 172, 252, 1);
                        }
                    }
                }
            }
            &-title {
                height: 50px;
                border-bottom: 1px #e8e8e8 solid;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 15px;

                &-more-btn {
                    margin: 0;
                    text-align: center;
                    color: rgba(80, 80, 80, 1);
                    font-size: 14px;
                    cursor: pointer;
                    transition: all .3s linear;
                    padding: 7px 0;
                    width: 70px;

                    &:hover {
                        color: #1890ff;
                    }
                }

                &-more {
                    font-size: 20px;
                    cursor: pointer;

                    &:hover {
                        color: #1890ff;
                    }
                }
            }

            &-form{
                height: 57px;
                border-bottom: 1px #cccccc dashed;
                padding: 0 15px;
                display: flex;
                justify-content: space-between;
                box-sizing: border-box;
                align-items: center;
            }
            &-table{
                flex: 1;
                padding: 0 0 0 15px;
                .ant-table-body {
                    height: calc(100% - 54px);
                    overflow: scroll!important;
                    transition: all .3s linear;
                }
                .ant-table-body::-webkit-scrollbar {
                    width: 5px;
                    height: 5px;
                }
                .ant-table-body::-webkit-scrollbar-track {
                    border-radius: 10px;
                    background-color: transparent;
                }
                .ant-table-body::-webkit-scrollbar-thumb {
                    background-color: transparent;
                    border-radius: 10px;
                }
                .ant-table-body:hover{
                    &::-webkit-scrollbar-thumb {
                        background-color: rgba(204,204,204,0.44);
                    }
                }
            }
            &-padding{
                text-align: center;
                padding: 15px 0 15px  0 ;
            }
        }
    }
    .shrinkage-icon{
        transition: all ease-in-out .3s;
    }
    .shrinkage-icon-right{
        transform: rotate(180deg);
    }
</style>
